import { Collapse, Tooltip } from "antd";
import {
  DeleteOutlined,
  CaretRightOutlined,
  SaveOutlined,
  ReloadOutlined,
  ExportOutlined,
  ImportOutlined,
  ClearOutlined,
} from "@ant-design/icons";
import { Panel as FlowPanel, Controls, ControlButton } from "reactflow";

const { Panel } = Collapse;

/**
 * 拖拽组件
 */
const onDragStart = (event, nodeType) => {
  event.dataTransfer.setData("application/reactflow", nodeType);
  event.dataTransfer.effectAllowed = "move";
};
function DndNode({ type, children }) {
  return (
    <div
      className="dndnode"
      onDragStart={(event) => onDragStart(event, type)}
      draggable
    >
      {children}
    </div>
  );
}

/**
 * 侧边栏
 */
function NodeSider() {
  return (
    <FlowPanel position="top-left" style={{ top: 25 }}>
      <Collapse defaultActiveKey={["1"]}>
        <Panel header="图片" key="1">
          <DndNode type="imageImport">导入图片</DndNode>
          <DndNode type="imageDisplay">显示图片</DndNode>
        </Panel>
        <Panel header="增强" key="2">
          <DndNode type="imageLinearEnhancement">线性变换</DndNode>
          <DndNode type="imageNonLinearEnhancement">非线性变换</DndNode>
          <DndNode type="imageSharpen">锐化</DndNode>
          <DndNode type="imageEqualizeHist">直方图均衡</DndNode>
        </Panel>
        <Panel header="恢复" key="3">
          <DndNode type="imageProjection">投影矫正</DndNode>
          <DndNode type="imageDeBlur">去模糊</DndNode>
        </Panel>
        <Panel header="变换" key="4">
          <DndNode type="imageGrayScale">灰度化</DndNode>
          <DndNode type="imageFFT">FFT</DndNode>
          <DndNode type="imageDCT">DCT</DndNode>
          <DndNode type="imageHistgram">直方图</DndNode>
        </Panel>
        <Panel header="分割/合成" key="5">
          <DndNode type="imageMerge">图层</DndNode>
          <DndNode type="imageHumanSeg">提取人像</DndNode>
        </Panel>
      </Collapse>
    </FlowPanel>
  );
}

/**
 * 节点编辑器控制组件
 */
function NodeControl({
  deleteSelection,
  exportData,
  onSave,
  onRestore,
  clearFlow,
}) {
  return (
    <Controls showZoom={false} className="nodeEditor_control">
      {/* 导入 */}
      <ControlButton onClick={onRestore}>
        <Tooltip placement="right" title="导入">
          <ImportOutlined />
        </Tooltip>
      </ControlButton>
      {/* 导出 */}
      <ControlButton onClick={onSave}>
        <Tooltip placement="right" title="导出">
          <ExportOutlined />
        </Tooltip>
      </ControlButton>

      {/* 删除按钮 */}
      <ControlButton onClick={clearFlow}>
        <Tooltip placement="right" title="清空">
          <ClearOutlined />
        </Tooltip>
      </ControlButton>

      {/* 删除按钮 */}
      <ControlButton onClick={deleteSelection}>
        <Tooltip placement="right" title="删除">
          <DeleteOutlined />
        </Tooltip>
      </ControlButton>

      {/* 运行按钮 */}
      <ControlButton onClick={exportData}>
        <Tooltip placement="right" title="运行">
          <CaretRightOutlined />
        </Tooltip>
      </ControlButton>
    </Controls>
  );
}

export { NodeSider, NodeControl };
